<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        
        <title>AngularJS for Hybrid UI | Kendo UI Hybrid Components</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Use the AngularJS directives with hybrid mobile Kendo UI components.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("AngularJS/angular-hybrid.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//AngularJS/angular-hybrid.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="angularjs-for-hybrid-ui"><a href="#angularjs-for-hybrid-ui">AngularJS for Hybrid UI</a></h1>

<p>As of the Kendo UI Q3 2014 release, the suite includes AngularJS directives for some of its Hybrid UI components such as the hybrid mobile Application and View, the SplitView, and the ModalView.</p>

<p>In this context, the mobile views support AngularJS controllers, directives and two-way data binding expressions.</p>

<h2 id="getting-started"><a href="#getting-started">Getting Started</a></h2>

<p>The following example demonstrates how to use the Hybrid UI Application directive. By default, the <code>kendo-mobile-application</code> directive is set to the <code>body</code> element with <code>ng-app</code>.</p>

<h6>Example</h6>

<pre><code>&lt;body kendo-mobile-application ng-app="foo"&gt;
    &lt;kendo-mobile-view ng-controller="MyCtrl" k-title="'My Title'" k-layout="'default'"&gt;
        &lt;kendo-mobile-header&gt;
            &lt;kendo-mobile-nav-bar&gt;
                &lt;kendo-view-title&gt;&lt;/kendo-view-title&gt;
            &lt;/kendo-mobile-nav-bar&gt;
        &lt;/kendo-mobile-header&gt;

         {{hello}} 
    &lt;/kendo-mobile-view&gt;

    &lt;script&gt;
        angular.module("foo", [ "kendo.directives" ])
            .controller("MyCtrl", function($scope) {
                $scope.hello = "Hello World!";
            });
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>

<h2 id="routing"><a href="#routing">Routing</a></h2>

<p>The mobile application instantiates and maintains its own routing mechanism based on the <a href="/framework/spa/router"><code>router</code></a> component which automatically matches and instantiates views when navigating.</p>

<p>Note that unlike the <a href="https://docs.angularjs.org/api/ngRoute"><code>ng-route</code>, <code>ng-view</code></a>, and the <a href="https://github.com/angular-ui/ui-router"><code>ui-router</code></a> implementations, the mobile application does not unload the previous view when navigating to the new one. Also, AngularJS routing mechanisms are not supported.</p>

<h2 id="controllers"><a href="#controllers">Controllers</a></h2>

<p>If an <code>ng-controller</code> directive is set to the <code>view</code> element, the controller definition is executed each time the view is shown, matching the view <code>show</code>
event.</p>

<h2 id="hybrid-ui-widget-directives"><a href="#hybrid-ui-widget-directives">Hybrid UI Widget Directives</a></h2>

<p>All directives may be used as elements or as attributes. If a directive is used as an element name, it is replaced with a standard HTML element once the directive is compiled. Each mobile widget features AngularJS on the <a href="http://demos.telerik.com/kendo-ui/">Kendo UI demos web site</a>.</p>

<h3 id="actionsheet"><a href="#actionsheet">ActionSheet</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-action-sheet</code> directive. The item actions are assigned with the <code>k-action</code> attribute and are resolved from the widget scope.</p>

<h3 id="button"><a href="#button">Button</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-button</code> directive.</p>

<h3 id="backbutton"><a href="#backbutton">BackButton</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-back-button</code> directive.</p>

<h3 id="detailbutton"><a href="#detailbutton">DetailButton</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-detail-button</code> directive.</p>

<h3 id="buttongroup"><a href="#buttongroup">ButtonGroup</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-button-group</code> directive.</p>

<h3 id="collapsible"><a href="#collapsible">Collapsible</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-collapsible</code> directive. The inner markup follows the same convention as the non-Angular widget.</p>

<h3 id="drawer"><a href="#drawer">Drawer</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-drawer</code> directive. Like the view, it calls the controller (if present) each time it is displayed.</p>

<h3 id="mobilelistview"><a href="#mobilelistview">MobileListView</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-list-view</code> directive.</p>

<h3 id="modalview"><a href="#modalview">ModalView</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-modal-view</code> directive. Like the view, it calls the controller (if present) each time it is displayed.</p>

<h3 id="navbar"><a href="#navbar">NavBar</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-nav-bar</code> directive. The element displaying the view title is instantiated from the <code>kendo-view-title</code> directive.</p>

<h3 id="popover"><a href="#popover">PopOver</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-pop-over</code> directive. The <code>ng-controller</code> directives may be set to the popover views.</p>

<h3 id="scroller"><a href="#scroller">Scroller</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-scroller</code> directive.</p>

<h3 id="scrollview"><a href="#scrollview">ScrollView</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-scroll-view</code> directive.</p>

<h3 id="switch"><a href="#switch">Switch</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-switch</code> directive. The directive should be used as an attribute of an <code>input</code> element if the value should be submitted with a form.</p>

<h3 id="tabstrip"><a href="#tabstrip">TabStrip</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-tab-strip</code> directive.</p>

<h3 id="application"><a href="#application">Application</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-application</code> directive.</p>

<h3 id="touch"><a href="#touch">Touch</a></h3>

<p>The widget is instantiated from the <code>kendo-touch</code> directive.</p>

<h3 id="view"><a href="#view">View</a></h3>

<p>The widget is instantiated from the <code>kendo-view</code> directive. The header and footer elements may be instantiated from the <code>kendo-mobile-header</code> and <code>kendo-mobile-footer</code> directives, respectively.</p>

<h3 id="splitview"><a href="#splitview">SplitView</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-split-view</code> directive. The panes are instantiated with the <code>kendo-mobile-pane</code> directive.</p>

<h3 id="layout"><a href="#layout">Layout</a></h3>

<p>The widget is instantiated from the <code>kendo-mobile-layout</code> directive. The header and footer elements may be instantiated from the <code>kendo-mobile-header</code> and <code>kendo-mobile-footer</code> directives, respectively.</p>

<h2 id="widget-directives-attributes"><a href="#widget-directives-attributes">Widget Directives Attributes</a></h2>

<p>The hybrid mobile widgets may be configured via the <code>k-</code> prefixed attributes. For more information on the parsing of attributes, refer to the <a href="/AngularJS/introduction">introductory article on AngularJS</a>.</p>

<h2 id="see-also"><a href="#see-also">See also</a></h2>

<p>Other articles on the integration of Kendo UI hybrid components:</p>

<ul>
<li><a href="/controls/hybrid/support/regular-usage">Integration with Kendo UI for the Web</a></li>
<li><a href="/controls/hybrid/support/mvvm">MVVM Integration</a></li>
<li><a href="/AngularJS/tutorials/sushi-angular-tutorial">Build Applications with AngularJS and the Hybrid UI</a></li>
<li><a href="http://ngmigrate.telerik.com/">Angular 2 Migration Guide</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

